<template>
  <div class="selection-daguopinpai">
    <!-- Background section -->
    <div class="background-section">
      <div class="background-text">
        推动供应商品牌建设，助力链主企业优化传统供应链，遴选行业优秀供应商，助力装备制造业高质量发展
      </div>
    </div>

    <!-- Cards section -->
    <div class="pinpai-card-ul">
      <div
          class="pinpai-card"
          v-for="(card, index) in cards"
          :key="index"
      >
        <div class="pinpai-card-svg">
          <img :src="card.svg" :alt="card.title">
        </div>
        <div class="pinpai-card-bgnum1">
          <img :src="card.bgImg" :alt="card.title">
        </div>
        <div class="pinpai-card-bgnum2">{{ card.number }}</div>
        <div class="pinpai-card-content">
          <div class="pinpai-card-title">{{ card.title }}</div>
          <div class="pinpai-card-desc" v-html="card.desc"></div>
        </div>
      </div>
    </div>

    <!-- Horizontal layout section -->
    <div class="selection-daguorj">
      <div class="selection-title">
        <div class="title-bgtext">SURMOUNT</div>
        <div class="title-text">迈迪优链<span>入驻流程</span></div>
        <div class="title-desc">
          所有面向制造业企业应用的工业软件，包括设计软件、分析软件、加工软件、管理软件等，都可以在这里申请加入迈迪优选软件平台，直接推广到全国制造业企业用户，让全国技术管理人员找到最合适自己使用的软件，降低企业使用软件成本，扩大软件商市场范围！
        </div>
      </div>
      <div class="daguorj-step">
        <img src="../../assets/home/daguorjstep.png" alt="迈迪优选入驻流程步骤图">
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'ContentPage3',
  data() {
    return {
      cards: [
        {
          svg: require('../../assets/home/pinpai-card1.svg'),
          bgImg: require('../../assets/home/01icon.png'),
          number: '01',
          title: '供应商注册',
          desc: '填写信息资料 <br> 完成供应商注册'
        },
        {
          svg: require('../../assets/home/pinpai-card2.svg'),
          bgImg: require('../../assets/home/02icon.png'),
          number: '02',
          title: '资格审核',
          desc: '提交资质信息 <br> 完成资格审核'
        },
        {
          svg: require('../../assets/home/pinpai-card2.svg'),
          bgImg: require('../../assets/home/03icon.png'),
          number: '03',
          title: '完善企业信息',
          desc: '上传企业资料 <br> 完善企业基本信息'
        },
        {
          svg: require('../../assets/home/pinpai-card4.svg'),
          bgImg: require('../../assets/home/04icon.png'),
          number: '04',
          title: '上传公司产品',
          desc: '上传公司产品 <br> 完成企业产品供应链'
        },
        {
          svg: require('../../assets/home/pinpai-card5.svg'),
          bgImg: require('../../assets/home/05icon.png'),
          number: '05',
          title: '登录管理后台',
          desc: '登录后台系统 <br> 维护管理企业产品及数据'
        }
      ]
    }
  }
}
</script>

<style scoped>
.selection-daguopinpai {
  position: relative;
  width: 100%;
}

/* Background section styles */
.background-section {
  width: 100%;
  height: 620px;
  /* background-image: url('../../assets/home/home-bg2.png'); */
  background-image: url('../../assets/home/appIntroduction/home-bg2.jpg'); /* ycr 250621 */
  background-size: auto 100%;
  background-position: center center;
  position: relative;
}

.background-text {
  color: #fff;
  font-size: 16px;
  text-align: center;
  letter-spacing: 2px;
  line-height: 24px;
  padding-top: 420px;
  position: relative;
  z-index: 1;
}

/* Cards section styles */
.pinpai-card-ul {
  /*width: 1200px; */
   margin: 0 auto;
   position: absolute;
   left: 50%;
   transform: translateX(-50%) translateY(-50%);
   display: flex;
   justify-content: space-between;
   gap: 15px;
   z-index: 2;
 }

 .pinpai-card-ul .pinpai-card {
   width: 250px;
   height: 140px;
   background: #fff;
   position: relative;
   box-shadow: 0 2px 12px rgba(138, 138, 138, 0.24);
   display: flex;
   align-items: center;
   border-radius: 4px;
   overflow: hidden;
 }

 .pinpai-card-ul .pinpai-card-svg {
   padding-left: 10px;
   padding-right: 10px;
   flex-shrink: 0;
 }

 .pinpai-card-ul .pinpai-card-bgnum1 {
   position: absolute;
   right: 0;
   top: 0;
   width: 70px;
   height: 70px;
 }

 .pinpai-card-ul .pinpai-card-bgnum1 img {
   width: 100%;
   height: 100%;
   object-fit: contain;
 }

 .pinpai-card-ul .pinpai-card-bgnum2 {
   font-size: 70px;
   line-height: 90px;
   font-weight: bold;
   position: absolute;
   left: 30px;
   top: 15px;
   opacity: .07;
   color: #002e70;
   font-family: 'Arial', sans-serif;
 }

 .pinpai-card-ul .pinpai-card-content {
   padding-right: 10px;
 }

 .pinpai-card-ul .pinpai-card-title {
   font-weight: 700;
   font-size: 15px;
   line-height: 24px;
   letter-spacing: .01em;
   color: #002e70;
   margin-bottom: 6px;
 }

 .pinpai-card-ul .pinpai-card-desc {
   font-weight: 400;
   font-size: 13px;
   line-height: 18px;
   letter-spacing: .01em;
   color: #434343;
 }

 /* Horizontal layout section styles */
.selection-daguorj {
  width: 1200px;
  margin: 100px auto 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 40px 0 40px 0;
}

.selection-daguorj .selection-title {
  width: 35%;
  padding-right: 30px;
}

.selection-daguorj .selection-title .title-bgtext {
  font-size: 60px;
  font-weight: 700;
  color: rgba(0, 46, 112, 0.05);
  position: absolute;
}

.selection-daguorj .selection-title .title-text {
  font-size: 34px;
  font-weight: 700;
  color: #000000;
  line-height: 1.3;
  padding-top: 30px;
}

.selection-daguorj .selection-title .title-text span {
  color: #f2a11b;
}

.selection-daguorj .selection-title .title-desc {
  font-weight: 400;
  font-size: 15px;
  line-height: 28px;
  color: #434343;
  margin-top: 20px;
}

.selection-daguorj .selection-title * {
  text-align: left;
}

.selection-daguorj .daguorj-step {
  width: 65%;
}

.selection-daguorj .daguorj-step img {
  width: 100%;
  height: auto;
  display: block;
}

</style>